<template>
  <div class="home" :class="{homeActive:download}">
    <download @close-down='closeDowns' v-if='download'></download>
    <div class="homepage">
        <div class="headNav" ref='nav'>
          <div class="selectCity" @click='selectAddress'>
            <span>{{city}}</span>
            <em></em>
          </div>
          <div class="search" ref='search' @click='goSearch'>
            <img src="../../assets/image/homepage/search.png" alt="" />
            <span>请输入你要的商品</span>
          </div>
          <div class="message" @click='goMessageCenter'>
            <em></em>
          </div>
        </div>
        <div class="homeMain" ref='homeMain'>
            <div class="banner" id="banner">
                 <swiper dots-position="center" :auto='true' :duration='300' :loop='true'>
                  <swiper-item class="swiper-demo-img" v-for='(item,index) in allFunMess.TOP_ARRAY_NEW' :key='index' @click.native='activeGo(item.WEBHREF)'>
                     <img :src="item.MEDIA_PATH" alt="" />
                  </swiper-item>
                </swiper>
            </div>
            <div class="allFunIcon">
                <swiper dots-position="center" :loop='true' :show-dots='false' @on-index-change='funIconIndex'>
                  <swiper-item class="swiper-demo-img" v-for='(key,index) in funIcon' :key='index'>
                     <div class="funIcon">
                      <div class="funItem" v-for='item in funIcon[index].key' @click='homeFun(item.SERV_ID)'>
                        <img :src="funUrl+item.ICON_NAME" alt="" />
                        <p>{{item.SERV_NAME}}</p>
                      </div>
                    </div>
                  </swiper-item>
                </swiper>
                <div class="lineBar" v-if='swiperIndex>1'>
                  <p class="line" :style="{left:1.3*funIndex+'rem',width:2.6/swiperIndex+'rem'}"></p>
                </div>
            </div>
            <div class="tongInfor">
              <img src="../../assets/image/homepage/tongLogo3.png" alt="" />
              <!-- <div class="marqueetitle" style="float:left">
                  <p>汽车百科<span>|</span></p>
                  <p>用车知识<span>|</span></p>
                </div> -->
              <div class="marqueeBox">

                <marquee :item-height='23'>
                  <marquee-item v-for="(item,index) in headLine" :key="index" @click.native="goDiscover(item.CATEGORY)">
                    <p><span>{{item.CATEGORYNAME}}</span><span style="marign:0.05rem;">|</span>{{item.SUBJECT}}</p>
                  </marquee-item>
                </marquee>
                 <marquee :item-height='23'>
                  <marquee-item v-for="(item,index) in headLine2" :key="index" @click.native="goDiscover(item.CATEGORY)">
                    <p><span>{{item.CATEGORYNAME}}</span><span style="marign:0.05rem;">|</span>{{item.SUBJECT}}</p>
                  </marquee-item>
                </marquee>
              </div>

            </div>
            <div class="appActive">
              <div class="appActiveItem" v-for='(item,index) in allFunMess.GIFT_ADVERT' :key='index' @click='newActive(item.WEBHREF,index)'>
                <img :src="item.MEDIA_PATH" alt="" />
              </div>
            </div>

            <!-- 秒杀改版-->
            <div class="seckill2" v-if='seckillShop&&downObj.flag!=3'>
               <div class="seckillHead" @click="goSeck">
                  <div class="seckillLeft">
                  <img src="../../assets/image/homepage/seckillTilte1.png" alt="" v-if='downObj.flag==2'/>
                  <img src="../../assets/image/homepage/start.png" alt="" v-if='downObj.flag==1'/>
                  <span>{{downObj.h | filterNum}}</span><label>:</label>
                  <span>{{downObj.m | filterNum}}</span><label>:</label>
                  <span>{{downObj.s | filterNum}}</span>
                </div>
                 <p class="more">查看更多<img src="../../assets/image/home/right.png" alt=""></p>
               </div>
               <div class="seckillMain">
                 <div class="seckillItem" v-for='item in seckillShop' @click='goShopDetail(item.SERV_ID)'>
                    <img :src="seckillUrl+item.COVER_IMG" alt="" />
                    <p><span class="r1">限时价</span><span class="r2">￥{{item.PRICE}}</span></p>
                    <span class="s">￥{{item.ORIGINAL_PRICE}}</span>
                 </div>
                 <!--<div class="seckillItem seckillItemLast">-->
                    <!--<a class="seckillRight" href='http://carnt.carnettong.com:8088/CARNT/H5/seck.jsp'>-->
                   <!--<p class="morec">查看更多</p>-->
                   <!--<p class="moree"><span class="btn">more</span></p>-->
                   <!--</a>-->
                 <!--</div>-->
               </div>
            </div>
            <div class="active">
              <div v-for='item in topAct' v-if='topAct'>
                <a class="activeLogos" :href="item.WEBHREF">
                  <img :src="item.MEDIA_PATH" alt="" />
                </a>
              </div>
              <div class="activeMain" v-for='item in allFunMess.ACT_ADVERT' v-if='allFunMess.ACT_ADVERT'>
                <iframe :src="item.WEBHREF" frameborder='0'></iframe>
              </div>
              <div class="shopGroupK" v-if='groupActive.length>0'>
                <div class="groupEntro" v-for='item in groupActive' @click='goGroupList'>
                  <img :src="item.MEDIA_PATH" alt="" />
                </div>
              </div>
            </div>
            <div class="otherFun" v-if='Cafe||activeCafe1||activeCafe2'>
              <h1>
                <img src="../../assets/image/home/cafeTitle1.png" alt="" />
              </h1>
              <div class="cafeActive">
                <div class="cafeItem" v-for='item in Cafe'>
                  <img :src="item.MEDIA_PATH" alt=""  @click='goWebCafe'/>
                </div>
                <div class="activeCafe">
                  <div v-for='items in activeCafe1'>
                    <img :src="items.MEDIA_PATH" alt=""  @click='cafeGo1(items.WEBHREF)'/>
                  </div>
                  <div v-for='items in activeCafe2'>
                    <img :src="items.MEDIA_PATH" alt=""  @click='cafeGo2(items.WEBHREF)'/>
                  </div>
                </div>
              </div>
            </div>
            <!--一起拼团-->
            <div class="group" v-if="grouponAdData">
              <div class="groupHeader" @click="$router.push('/groupList')">
                <span >查看更多<img src="../../assets/image/home/right.png" alt="" style="height:0.24rem;margin-left:0.04rem;transform:translateY(0.03rem)"></span>
                <img src="../../assets/image/home/groupHeader1.png" class="titImg" alt="">
              </div>
              <div class="groupBox">
                <!--<div class=" goodsOne">-->
                  <!--<h3>安尼泰科行车记录仪</h3>-->
                  <!--<p>拼团价：￥20</p>-->
                  <!--<span>立即抢购></span>-->
                  <!--<img src="../../assets/image/home/invitation.png" alt="">-->
                <!--</div>-->
                <!--<div class=" goodsTwo">-->
                  <!--<h3>仿玉元宝香水座</h3>-->
                  <!--<p>拼团价: ¥16</p>-->
                  <!--<span>立即抢购></span>-->
                  <!--<img src="../../assets/image/home/invitation.png" alt="">-->
                <!--</div>-->
                <!--<div class=" goodsThree">-->
                  <!--<h3>安尼泰科K20行车记录仪</h3>-->
                  <!--<p>拼团价: ¥16</p>-->
                  <!--<span>立即抢购></span>-->
                  <!--<img src="../../assets/image/home/invitation.png" alt="">-->
                <!--</div>-->
                <div class="goodsOne" @click="goGroupDetail(grouponAdData[0].ACTION)">
                  <img :src="adOne" alt="">
                </div>
                <div class="groupRight">
                  <div class="goodsTwo" @click="goGroupDetail(grouponAdData[1].ACTION)">
                    <img :src="adTwo" alt="">
                  </div>
                  <div class="goodsThree" @click="goGroupDetail(grouponAdData[2].ACTION)">
                    <img :src="adThree" alt="">
                  </div>
                </div>
              </div>
            </div>
          <!-- 今日油价 -->
            <div class="oil" v-if="oilPriceData">
              <div class="oilHeader" @click="goRememberOilEntry">
                <span>记一笔加油</span>
                <img src="../../assets/image/home/oil1.png" class="titImg" alt="">
              </div>
              <div class="oilBox">
                <div class="oil1 border-bottom">
                  <div class="item">
                    <span class="span1">{{oilType[0]}}</span>
                    <span class="span2">{{oilPriceData['93#']}}</span>
                  </div>
                  <div class="item">
                    <span class="span1">{{oilType[1]}}</span>
                    <span class="span2">{{oilPriceData['97#']}}</span>
                  </div>
                  <div class="item">
                    <span class="span1">{{oilType[2]}}</span>
                    <span class="span2">{{oilPriceData['0#']}}</span>
                  </div>
                </div>
                <div class="oil2" @click="goRefuel(oilState.location)">
                  <img src="../../assets/image/home/oil2.png"  alt="" class="oilImg1">
                  <div class="con" v-show="oilState">
                    <h3>{{oilState.name}}</h3>
                    <p class="p1">{{oilState.address}}</p>
                    <p class="p2" >距你<span style="margin:0 0.06rem;">{{oilState.dis}}</span>km</p>
                  </div>
                  <img src="../../assets/image/home/oil3.png" alt="" class="oilImg2">
                </div>
              </div>
            </div>
          <!-- 品质保养 -->
           <!--  <div class="maintain">
              <div class="maintainTitle">
                <span @click="goMaintainSc()">保养手册</span>
                <img src="../../assets/image/mine/bytitle.png" alt="">
              </div>
              <div class="maintainBox1">
                <img src="../../assets/image/mine/by1.png" alt="" class="img1" @click="goMaintain">
                <img src="../../assets/image/mine/by2.png" alt="" class="img2" @click="goMaintainCard">
              </div>
              <div class="maintainBox2">
                <div>
                  <img src="../../assets/image/mine/byi1.png" alt="">
                  <p>选择套餐</p>
                </div>
                <img src="../../assets/image/mine/redright.png" alt="" class="mright">
                <div>
                  <img src="../../assets/image/mine/byi2.png" alt="">
                  <p>预约时间</p>
                </div>
                <img src="../../assets/image/mine/redright.png" alt="" class="mright">
                <div>
                  <img src="../../assets/image/mine/byi3.png" alt="">
                  <p>到店保养</p>
                </div>
                <img src="../../assets/image/mine/redright.png" alt="" class="mright">
                <div>
                  <img src="../../assets/image/mine/byi4.png" alt="">
                  <p>完工晒单</p>
                </div>

              </div>
            </div> -->

            <!-- 附近门店 -->

            <!-- <div class="group" @click='goGroup1'>一分团购</div> -->
            <div class="carPro" v-if='productList'>
                <h1 @click="$router.push('/carProduct')">
                  <img src="../../assets/image/home/productTitle1.png" alt="" />
                  <span >查看更多<img src="../../assets/image/home/right.png" alt="" style="height:0.24rem;margin-left:0.04rem;transform:translateY(0.03rem)"></span>
                </h1>
                <div class="allProduct">
                  <div class="listItem productBorder" v-for='item in productList' @click='goShopDetail(item.SERV_ID)'>
                    <img :src="productMess.IMG_URL+item.COVER_IMG" alt="" v-if='productMess.IMG_URL'/>
                    <p>{{item.REMARK}}</p>
                    <h2>{{item.SERV_SUBJECT}}</h2>
                    <div class="price">
                      <span>￥{{item.PRICE}}</span>
                      <img src="../../assets/image/home/shopCar.png" alt="" />
                    </div>
                  </div>
                </div>
            </div>
            <div class="footerActive" v-if='bottomActive'>
              <h1>
                <img src="../../assets/image/home/activeTitle1.png" alt="" />
              </h1>
              <a class="bottomItem" v-for='item in bottomActive' :href="item.LINK_URL" v-if='bottomUrl'>
                <img :src="bottomUrl+item.IMG" alt="" />
                <p>{{item.SUBJECT}}</p>
              </a>
            </div>
        </div>
        <popup v-model="showAddress" position="right" width='100%'>
          <div class="addRessPop">
            <x-header title="城市选择" :left-options="{backText:'',preventGoBack:true}" @click.native='closeSelect' class='whiteHeader'></x-header>
            <mt-index-list>
              <mt-index-section :index='keys' v-for="(item,keys) in allAddress" :key='keys'>
                <mt-cell :title='items.NAME' v-for='(items,index) in item' :key='index' class='' @click.native='selectCity(items)'>
                </mt-cell>
              </mt-index-section>
            </mt-index-list>
          </div>
        </popup>
        <div class="goTop" ref='top' @click='gotop'>
        </div>
    </div>
    <!-- 新年弹窗2.12(年28)放到服务器上，加上图片 -->
    <popup v-model="showNewYear" position="top" height='100%' style="background:rgba(0,0,0,0.5);z-index:99999;">
      <div class="downApp" @click.stop="this.location.href='http://t.cn/RyUYEJx'">
        <img style="width:6.52rem;height:9rem;" src="../../assets/image/homepage/downloadAPP.png" alt="">
      </div>
      <div class="closeA" @click="showNewYear=false;">
        <img style="width:.54rem;height:.54rem;background:rgba(255,255,255,.3);border-radius:50%;" src="../../assets/image/close.png" alt="">
      </div>
    </popup>

    <div id="container"></div>
  </div>
</template>

<script>
import { setCookie, getCookie,clearAllCookie } from '../../util/commonUtils';
import { baiduMapLocal, deviceLocation } from '../../util/baidumap';
import { Swiper, SwiperItem,Marquee, MarqueeItem,Popup,XHeader,ConfirmPlugin  } from 'vux';
import { IndexList, IndexSection } from 'mint-ui';
import download from '../../components/download';
import $ from 'jquery'
export default {
  name:"homepage",
  // 数据
  data(){
    return{
        userId:'', //用户id
        city:'深圳',//当前用户所在的城市
        allFunMess:'',//首页所有图片信息
        headLine:[], //通仔头条
        headLine2:[], //通仔头条
        bottomActive:'', //底部活动信息
        bottomUrl:'',   //底部活动图片公共url
        productList:'', //车品数组
        productMess:'',   //车品信息
        topAct:'',  //顶部活动信息
        Cafe:'',   //cafe入口图
        activeCafe1:'', //cafe活动图1
        activeCafe2:'', //cafe活动图2
        groupActive:'',//团购数据
        funUrl:'',  //金刚位图片的公共Url
        funIcon:'',   //金刚位所有功能信息
        seckillShop:'',  //秒杀商品
        seckillUrl:'',  //秒杀商品公共Url
        downObj:{
          flag:3,
          h:'',
          m:'',
          s:''
        },  //倒计时参数
        allAddress:{}, //所有区域的数据
        showAddress:false, //地址弹窗
        allCity:[],  //所有城市
        cityMess:'',  //选择城市的信息
        download:true,  //下载条
        funIndex:0,
        swiperIndex:0,
        MAP:'',
        oilState:{},//最近加油站信息
        grouponAdData:'',//团广告位数据
        adOne:'',//
        adTwo:'',//
        adThree:'',//
        oilPriceData:'',//油价数据
        oilType:[],//油类型数组
        value1:'',//默认车牌号
        showNewYear:false,
    }
  },
  activated () {
    this.userId=getCookie('loginkey');
    this.city=sessionStorage.getItem('city');
  },
  // 计算属性
  computed:{
  },
  //创建（实例创建完成）
  created(){
      //请求实例
    var d1 = new Date();
    var d2 = new Date('2018-02-13 00:00:00');
    var d3 = new Date('2018-02-26 00:00:00');
    if(d2.getTime()<d1.getTime() && d3.getTime()>d1.getTime()){
      setTimeout(()=>this.showNewYear=true,1500);
    }else{
      console.log('还未开始');
    }
     this.userId=getCookie('loginkey');
     if(!sessionStorage.getItem('closeDown')){
        this.download=true;
     }else{
        this.download=false;
     }
     if(localStorage.getItem('citys')){
       this.city=localStorage.getItem('citys');
     }else{
       let lng ='113.937737';
       let lat = '22.554592';
       localStorage.setItem('latlgt',lng+','+lat);
       localStorage.setItem('citys','深圳');
       this.city='深圳';
      // this.getOilState();
     }
     if(!sessionStorage.getItem('city')){
          this.locations();
     }
     this.getHomeImg();
     this.getAddress();
     this.getBottomActive();

     this.getHeadline();
     this.getFunIcon();
     this.getCarProduct();
     this.getSeckill();
     this.$nextTick(()=>{
        this.scrollMonitorHome();//监控滚动条
     });
     this.grouponAd();
     this.todayOilPrice();
     this.allCars();
      // this.$fetchPost("/CommonService/getCarLifeInfo",{CITY_NAME:"深圳"}).then(res=>{
      //     console.log(res)
      // },err=>{
      //   console.log(err)
      // })
    //this.getOilState();
       // setTimeout(()=>{
       //  console.log(1)
       //    this.getOilState();
       // },2000)

  },
  // el被创建，并挂载到实例上
  mounted(){
       //获取最近加油站信息
       // setTimeout(()=>{
       //    this.getOilState();
       // },1000)
       //  setTimeout(()=>{
       //    // console.log(2);
       //    this.getOilState();
       // },1000)
       if (sessionStorage.getItem('latlgt')||this.latlgt) {
        this.getOilState();
       }
  },
  beforeDestroy(){
    window.onscroll=function(){
    };
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    this.$vux.loading.hide();
    next();
  },
  // 方法（实例中的方法）-----------
  methods:{
    // goMaintainSc(){
    //    if(this.userId){//登录情况下
    //       localStorage.removeItem('selectCar');
    //       sessionStorage.removeItem('selectCarId');
    //       this.$router.push('/maintainHome?city='+this.city+"&type=1");
    //   }else{
    //       //标识来自钣喷
    //       localStorage.removeItem('addCar');
    //       localStorage.removeItem('editCar');
    //       localStorage.setItem('from','maintain');
    //       this.$router.push('/addCar');
    //   }
    // },
    funIconIndex(index){
      this.funIndex=index;
    },
    goGroup1(){
      this.$router.push('/oneGroup');
    },
    goGroupList(){
      this.$router.push('/groupList');
    },
    closeDowns(val){
      this.download=false;
      sessionStorage.setItem('closeDown',1);
    },
    locations(){
      // 定位后更新数据
      let that=this;
      deviceLocation().then((data) => {
        // 获取百度定位后信息
      //  console.log(data);
        if(data.result.addressComponent.city){
          let citys = data.result.addressComponent.city.slice(0,data.result.addressComponent.city.length-1);
          let lng = data.result.location.lng;//经度
          let lat = data.result.location.lat;//纬度
          let city=localStorage.getItem('citys');
          if(city!==citys){
            this.$vux.confirm.show({
             title:'定位',
             content:`车网通定位您在${citys}，是否切换到${citys}?`,
             onConfirm () {//获取设置的值
              that.latlgt=lng+","+lat;

              that.city=citys;
              that.getHomeImg();
              that.getAddress();
              that.getBottomActive();
              sessionStorage.setItem('latlgt',that.latlgt);
              sessionStorage.setItem('city',that.city);
              localStorage.setItem('latlgt',that.latlgt);
              localStorage.setItem('citys',that.city);
             },
             onCancel(){
              that.latlgt=localStorage.getItem('latlgt');
              that.city=localStorage.getItem('citys');
             }
            })
          }else{
            that.latlgt=lng+","+lat;
            that.city=citys;
            sessionStorage.setItem('latlgt',that.latlgt);
            sessionStorage.setItem('city',that.city);
            localStorage.setItem('latlgt',that.latlgt);
            localStorage.setItem('citys',that.city);
          }
        }else{
          let lng ='113.937737';
          let lat = '22.554592';
          that.latlgt=lng+","+lat;
          that.city='深圳';
          sessionStorage.setItem('latlgt',that.latlgt);
          sessionStorage.setItem('city',that.city);
          localStorage.setItem('citys',that.city);
          localStorage.setItem('latlgt',that.latlgt);
        }
         this.getOilState();
      })

    },
    //首页所有图片接口
    getHomeImg(){
        this.$fetchPost('/CommonService/getHomeImages.action',{CITY:this.city}).then(res=>{
          if(res.STATUS_CODE==1){
            this.allFunMess=res.RESULT_DATA[0];
            this.topAct=res.RESULT_DATA[0].ICON_ARRAY.filter(function(item){
              return item.NAME=='ICON_30TOPACT';
            });
            this.Cafe=res.RESULT_DATA[0].ICON_ARRAY.filter(function(item){
              return item.NAME=='ICON_3964SCAFE';
            });
            this.activeCafe1=res.RESULT_DATA[0].ICON_ARRAY.filter(function(item){
              return item.NAME=='ICON_3964SCAFEACT_M';
            });
            this.activeCafe2=res.RESULT_DATA[0].ICON_ARRAY.filter(function(item){
              return item.NAME=='ICON_3964SCAFEACT';
            });
            this.groupActive=res.RESULT_DATA[0].ICON_ARRAY.filter(function(item){
              return item.NAME=='ICON_GROUPON';
            });
            if(this.Cafe.length==0){
              this.Cafe='';
            }
            if(this.activeCafe1.length==0){
              this.activeCafe1='';
            }
            if(this.activeCafe2.length==0){
              this.activeCafe2='';
            }
          }
        },err=>{
          console.log(err);
        })
    },
    //去搜索
    goSearch(){
      this.$router.push('/productSearch');
    },
    //城市切换
    selectAddress(){
      this.showAddress=true;
      this.$refs.homeMain.style.display='none';
    },
    selectCity(items){
      this.city=items.NAME;
      this.cityMess=items;
      this.showAddress=false;
      this.$refs.homeMain.style.display='block';
      sessionStorage.setItem('city',this.city);
      sessionStorage.setItem('ID',items.NAME);
      this.getHomeImg();
    },
    //关闭城市选择
    closeSelect(){
      this.showAddress=false;
      this.$refs.homeMain.style.display='block';
    },
    //首页金刚位的跳转
    homeFun(id){
      if(id==10002){//汽车美容
        if(this.cityMess.WASH==0){
          this.$vux.alert.show({
              title: '提示',
              content: '当前城市不支持汽车美容',
              onHide () {
              }
          })
          return;
        }
        this.goCosmetology();
      }else if(id==10001){//智能保养
        if(this.cityMess.MAINTAIN==0){
          this.$vux.alert.show({
              title: '提示',
              content: '当前城市不支持智能保养',
              onHide () {
              }
          })
          return;
        }
        this.goMaintain();
      }else if(id==10003){//极速钣喷
        if(this.cityMess.SPRAY==0){
          this.$vux.alert.show({
              title: '提示',
              content: '当前城市不支持极速钣喷',
              onHide () {
              }
          })
          return;
        }
        location.href=window.getIps+'/CARNT/jsp/pay/index.html#/';
      }else if(id==709394){//违章查缴
        if(this.cityMess.ILLEGAL==0){
          this.$vux.alert.show({
              title: '提示',
              content: '当前城市不支持违章查缴',
              onHide () {
              }
          })
          return;
        }
        this.goIllegal();
      }else if(id==10008){//4Scafe
        this.goCafe();
      }else if(id==10007){//汽车用品
        this.goCarProduct();
      }else if(id==10011){//保养年卡
        this.goMaintainCard();
      }else if(id==10012){//代驾
        this.goDrive();
      }else if(id==10013){//爱车盒子 ,直接跳到下载地址
        var u = navigator.userAgent;
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
        if(isiOS){
          location.href='https://itunes.apple.com/cn/app/id1189695151';
        }else{
          location.href='http://a.app.qq.com/o/simple.jsp?pkgname=com.qizhi.obd';
        }
      }else if(id==10014){//停车场
				this.goParkingMap();
      }
      else if(id==10017){//充电桩
        this.$router.push('/ChargingPile');
      }
      else if(id==10016){//加油站
        this.$router.push('/gasStation');
      }
      else if(id==10015){//拼团
        this.goGroupList();
      }
      else if(id==10028){
        this.$router.push('/oneGroup');
      }
      else if(id==10029){
        this.$router.push('/cutPriceList');
      }
    },
    //资讯头条
    getHeadline(){
        this.$fetchPost('/Article/tongBoyHeadLine',{}).then(res=>{
          if(res.STATUS_CODE==1){
            this.headLine=res.RESULT_DATA;

            for(let i = 1 ;i<this.headLine.length;i++){
              this.headLine2.push(this.headLine[i])
            }
            this.headLine2.push(this.headLine[0])

          }
        },err=>{
          console.log(err);
        })
    },
    //获取所有功能的入口(金刚位)
    getFunIcon(){
        this.$fetchPost('/CommonServiceWeb/getServClass3.action',{}).then(res=>{
          if(res.STATUS_CODE==1){
            this.funIcon=[];
            let allFunIconArr =[]
            for(let i = 0; i< res.RESULT_DATA.length;i++){
              if(res.RESULT_DATA[i].ORDER_NUM){
                allFunIconArr.push(res.RESULT_DATA[i])
              }
            }
            let allFunIcon=allFunIconArr;
            allFunIcon=allFunIcon.sort(this.sortBy('ORDER_NUM',true));
            // console.log(allFunIcon)
            for(var i=0;i<Math.floor(allFunIcon.length/10);i++){
              this.funIcon.push({key:allFunIcon.slice(i*10,(i+1)*10)});
            }
            if(allFunIcon.length%10!=0){
              this.funIcon.push({key:allFunIcon.slice(i*10,allFunIcon.length)});
            }
            this.swiperIndex=Math.ceil(allFunIcon.length/10);
            this.funUrl=res.ICON_URL+'Android/';
          }
        },err=>{
          console.log(err);
        })
    },
    sortBy(attr,rev){
        //第二个参数没有传递 默认升序排列
        //@param attr 排序的属性 如number属性
        // @param rev true表示升序排列，false降序排序
        if(rev ==  undefined){
            rev = 1;
        }else{
            rev = (rev) ? 1 : -1;
        }

        return function(a,b){
            a = Number(a[attr]);
            b = Number(b[attr]);
            if(a < b){
                return rev * -1;
            }
            if(a > b){
                return rev * 1;
            }
            return 0;
        }
    },
    //获取秒杀商品
    getSeckill(){
      this.$fetchPost('/SeckillServDetail/seckDetailList.action',{}).then(res=>{
          if(res.STATUS_CODE==1){
            this.seckillShop=res.RESULT_DATA;
            this.seckillUrl=res.IMG_URL;
            this.downTime(res.STARTDATE,res.ENDDATE);
          }else if(res.STATUS_CODE==20){
            this.seckillShop=[];
          }
        },err=>{
          console.log(err);
        })
    },

    //计算时间
    computedTime(start,end){
      let nowTime=new Date().getTime();
      let time,h,m,s,flag;
      if(nowTime<start){
        time=start-nowTime;
        flag=1;
      }else if(nowTime<=end){
        time=end-nowTime;
        flag=2;
      }else{
        time=0;
        flag=3;
      }
      if(time){
        h=parseInt(time/(3600*1000));
        m=parseInt((time-h*3600*1000)/(60*1000));
        s=parseInt((time-h*3600*1000-m*60*1000)/(1000));
      }
      this.downObj={
        flag:flag,
        h:h,
        m:m,
        s:s
      }
    },
    //获取区域列表
    getAddress(){
        this.$fetchPost('/CommonServiceWeb/getRegion.action',{CITY_ID:0}).then(res=>{
          if(res.STATUS_CODE==1){
            this.allAddress={};
            for(let i=0;i<res.RESULT_DATA.length;i++){
              if(this.allAddress.hasOwnProperty(res.RESULT_DATA[i].INITIAL)){
                this.allAddress[res.RESULT_DATA[i].INITIAL].push(res.RESULT_DATA[i]);
              }else{
                this.$set(this.allAddress,res.RESULT_DATA[i].INITIAL,[res.RESULT_DATA[i]])
              }
            }
            this.allCity=res.RESULT_DATA;
            for(let i=0;i<this.allCity.length;i++){
              if(this.city==this.allCity[i].NAME){
                this.cityMess=this.allCity[i];
                sessionStorage.setItem('ID',this.cityMess.ID);
              }
            }
            this.allAddress=this.objKeySort(this.allAddress);
          }
        },err=>{
          console.log(err);
        })
    },
    objKeySort(obj) {//排序的函数
        var newkey = Object.keys(obj).sort();
    　　//先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组
        var newObj = {};//创建一个新的对象，用于存放排好序的键值对
        for (var i = 0; i < newkey.length; i++) {//遍历newkey数组
            newObj[newkey[i]] = obj[newkey[i]];//向新创建的对象中按照排好的顺序依次增加键值对
        }
        return newObj;//返回排好序的新对象
    },
    //倒计时
    downTime(start,end){
      setInterval(()=>{
        this.computedTime(start,end);
      },500)
    },
    //获取底部活动
    getBottomActive(){
        this.$fetchPost('/ActWeb/getEffectiveAct.action',{
          CITY:this.city,
          PAGE_NO:1,
          PAGE_SIZE:10,
          POSITION:1
        }).then(res=>{
          if(res.STATUS_CODE==1){
            if(res.RESULT_DATA.length>0){
              this.bottomActive=res.RESULT_DATA;
            }
            this.bottomUrl=res.COVER_URL;
          }
        },err=>{
          console.log(err);
        })
    },
    //banner活动跳转
    activeGo(url){
        location.href=url;
    },
    //cafe活动1跳转
    cafeGo1(url){
      // if(!!url){
      //   location.href=url;
      // }
      this.goCafe();
    },
    //cafe活动2跳转
    cafeGo2(url){
      if(!!url){
        location.href=url;
      }
    },
    //去4scafe
    goWebCafe(){
      this.goCafe();
    },
    //去4scafeM端
    goCafe(){
      if(this.userId){//登录情况下
          location.href='http://carnt.carnettong.com:8088/4SCAFE/HTML5/aTestWx/dist/index.html?phone='+getCookie('userName');
      }else{
          location.href='http://carnt.carnettong.com:8088/4SCAFE/HTML5/aTestWx/dist/index.html'
      }
    },
    //金刚位下面的活动
    newActive(url,index){
      if(!!url){
        if(index==3){
          location.href='http://carnt.carnettong.com:8088/CARNT/web/draw.html';
        }else{
          location.href=url;
        }
      }else{
        if(!this.userId){//非登录情况下
            this.$router.push('/login');
            return;
        }
        if(index==1){
           this.$router.push('/invitation');
        }else if(index==0){
           this.$router.push('/getMacaroni?phone='+getCookie('userName'));
        }
      }
    },
    //头条到发现
    goDiscover(id){
      this.$router.push('/discover?type='+id);
    },
    //推荐车品
    getCarProduct(){
        this.$fetchPost('/ServDetail/getHomeSpecServDetail.action',{}).then(res=>{
          if(res.STATUS_CODE==1){
            this.productMess=res;
            if(res.RESULT_DATA.length>0){
              this.productList=res.RESULT_DATA;
            }
          }
        },err=>{
          console.log(err);
        })
    },
    //监控滚动条显示回顶部按钮
    scrollMonitorHome(){
      let that=this;
      window.onscroll=function(){
        if(location.href.split('#')[1]!='/homepage'){
          return;
        }
        let top=document.body.scrollTop||document.documentElement.scrollTop;
        let top1=document.getElementById('banner').offsetHeight;
        if(top>900){
          that.$refs.top.style.display='block';
        }else{
          that.$refs.top.style.display='none';
        }
        if(top>top1-68){
          that.$refs.nav.className='headNav headNavActive';
        }else{
          that.$refs.nav.className='headNav';
          let opc=(top/top1)*0.9;
          let opc2=(top/top1)*0.3+0.7;
          that.$refs.nav.style.background='rgba(255,255,255,'+opc+')';
          that.$refs.search.style.background='rgba(255,255,255,'+opc2+')';
        }
      }
    },
    //回顶部
    gotop(){
      document.body.scrollTop=0;
      document.documentElement.scrollTop=0;
    },
    //去代驾
    goDrive(){
      this.$router.push('/drive');
    },
    //去商品详情页
    goShopDetail(id){
      this.$router.push('/shopDetail/'+id);
    },
    //获取附近的加油站
    getOilState(){
        let that =this;

         let str =sessionStorage.getItem("latlgt")?sessionStorage.getItem("latlgt").split(","):this.latlgt.split(",")
        // this.MAP = new BMap.Map("container");
        // let mPoint = new BMap.Point(str[0],str[1]);
        // that.MAP.centerAndZoom(new BMap.Point(str[0],str[1]), 11);
        // var local =  new BMap.LocalSearch(that.MAP, {
        //       pageCapacity:1,//每页返回数据量，默认为10
        //       renderOptions: {
        //         map: that.MAP,//当指定此参数后，搜索结果的标注、线路等均会自动添加到此地图上--此参数开始必须使用
        //       }
        //     });
        // let arr=['加油站'];//搜索多个关键字
        // local.searchNearby(arr,mPoint);//1000表示附近1000米
        //  setTimeout(()=>{
        //      let dis=that.MAP.getDistance(mPoint,local.wf[0].point)/1000
        //      this.oilState=local.wf[0];
        //      this.oilState.dis=dis.toFixed(2);
        //   },1000)

        $.ajax({
         type: 'get',
            url: 'http://api.map.baidu.com/place/v2/search?query=加油站&location='+str[1]+','+str[0]+'113.937737&radius=5000&output=json&ak=f7GpjqXB2NkRGlzqIqywWTbo',
            async: true,
            dataType: 'jsonp',
            jsonp: 'callback',
            success:function(data){
                var point =data.results[0].location;
                var mile = GetDistance(str[1],str[0],point.lat,point.lng)
                     that.oilState=data.results[0];
                     that.oilState.dis=mile.toFixed(2);
                    // console.log(that.oilState)
            }
       })

       function Rad(d){
             return d * Math.PI / 180.0;//经纬度转换成三角函数中度分表形式。
          }
        //计算地图上两个坐标的直线距离
       function GetDistance(lat1,lng1,lat2,lng2){
              var radLat1 = Rad(lat1);
              var radLat2 = Rad(lat2);
              var a = radLat1 - radLat2;
              var  b = Rad(lng1) - Rad(lng2);
              var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a/2),2) +
              Math.cos(radLat1)*Math.cos(radLat2)*Math.pow(Math.sin(b/2),2)));
              s = s *6378.137 ;// EARTH_RADIUS;
              s = Math.round(s * 10000) / 10000; //输出为公里
              //s=s.toFixed(4);
              return s;
        }
    },
    //调百度找加油站
      goRefuel(point){
        this.$vux.confirm.show({
          title:'提示',
          content:'即将跳转到百度导航',
          onConfirm () {
            window.location.href="http://api.map.baidu.com/geocoder?location="+point.lat+","+point.lng+"&coord_type=bd09ll&output=html&src=cwt"
          }
        })
      },
    //去保养
    goMaintain(){
      if(this.userId){//登录情况下
          localStorage.removeItem('selectCar');
          sessionStorage.removeItem('selectCarId');
          sessionStorage.removeItem('MDEPTHMTNAME');
          this.$router.push('/maintainHome');
      }else{
          //标识来自钣喷
          localStorage.removeItem('addCar');
          localStorage.removeItem('editCar');
          localStorage.setItem('from','maintain');
          this.$router.push('/addCar');
      }
    },
    //保养年卡
    goMaintainCard(){
      this.$router.push('/yearCard');
    },
    goCarProduct(){
      this.$router.push('/carProduct');
    },
    goIllegal(){//去违章
      if(this.userId){//登录情况下
          this.$router.push('/illegalHome');
      }else{
          this.$router.push('/login');
      }
    },
    //美容
    goCosmetology(){
      let id=this.cityMess.ID;
      let city=sessionStorage.getItem('city');
      this.$router.push('/cosmetology?id='+id+'&city='+city);
    },
    //去消息中心
    goMessageCenter(){
      if(this.userId){//登录情况下
          this.$router.push('/msgCenter');
      }else{
          this.$router.push('/login');
      }
    },
    //去停车场
    goParkingMap(){
    	this.$router.push('/parkingMap');
    },
    //一起拼团广告位
    grouponAd(){
      let obj = {};
      obj.REGION = '深圳';
      obj.CATEGORY = 'GROUPON_INDEX';
      this.$fetchPost('/CommonService/getGrouponRegion',obj).then(res=>{
        if(res.STATUS_CODE==1){
          this.grouponAdData = res.REGIINADVS;
          this.adOne = res.REGIINADVS[0].MEDIAPATH;
          this.adTwo = res.REGIINADVS[1].MEDIAPATH;
          this.adThree = res.REGIINADVS[2].MEDIAPATH;
        }
      },err=>{
        console.log(err);
      })
    },
    //一起拼团详情
    goGroupDetail(type){
      if(type=='groupon'){
        this.$router.push('/groupList');
      }
    },
    //今日油价
    todayOilPrice(){
      let obj = {};
      obj.CITY_NAME = localStorage.getItem('citys');
      this.$fetchPost('/CommonServiceWeb/getTodayMulitInfo',obj).then(res=>{
        if(res.STATUS_CODE==1){
          this.oilPriceData = res;
          this.oilType = res.OIL_LABEL.split(',');
        }
      },err=>{
        console.log(err);
      })
    },
    //所有车
    allCars(){
      this.$fetchPost('/UserWeb/getCars.action',{USER_ID:this.userId}).then(res=>{
        if(res.STATUS_CODE==1){
          //过滤掉有'未设置'三个字的车
          for(let j=0;j<res.CARS.length;j++){
            if(res.CARS[j].BRAND=='未设置' || res.CARS[j].LICENCE=='未设置'){
              res.CARS.splice(j,1);
            }
          }
          for(let i=0;i<res.CARS.length;i++){
            if(res.CARS[i].IS_DEFAULT_CAR == 1){//默认车辆
              this.value1 = res.CARS[i].LICENCE;
            }else{
              this.value1 = res.CARS[0].LICENCE;//没有就取第一个车牌号
            }
          }
        }
      },err=>{
        console.log(err);
      })
    },
    //记一笔加油
    goRememberOilEntry(){
      if(!this.userId){
        this.$router.push('/login');
        return;
      }
      if(!this.value1){
        this.$router.push('/addCar');
        return;
      }
      this.$router.push('/rememberOilEntry');
    },
    //去秒杀专场
    goSeck(){
      location.href='http://carnt.carnettong.com:8088/CARNT/H5/seck.jsp';
    },
  },
  // 子组件
  components:{
    Swiper, SwiperItem,Marquee, MarqueeItem,Popup,XHeader,download,ConfirmPlugin
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import url('../../assets/css/public.less');
.homeActive{
  padding-top: 0.88rem;
}
.homepage{

    width: 7.5rem;
    background: #efeff4;
    padding-bottom: 0.88rem;
    .allFunIcon{
      background: #fff;
      /* .borderBFu(#ede9e9); */
      height: 3.3rem;
      .funIcon{
        height: 3.14rem;
      }
      .lineBar{
        width: 2.6rem;
        height: 0.04rem;
        background: #eee;
        margin: 0 auto;
        border-radius: 0.05rem;
        position: relative;
        .line{
          height: 0.04rem;
          background: #ec2121;
          border-radius: 0.05rem;
          position: absolute;
          top: 0;
        }
      }
    }
    .addRessPop{
      overflow: scroll;
    }
    .headNav{
      position: fixed;
      height: 0.88rem;
      width: 7.5rem;
      z-index: 888;
      background: rgba(255,255,255,0);
      display: flex;
      align-items:center;
      .selectCity{
        width: 22%;
        display: flex;
        align-items:center;
        justify-content:center;
        span{
          color: #fff;
          font-size: 0.33rem;
          max-width: 65%;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        em{
          margin-left: 0.1rem;
          width: 0.2rem;
          height: 0.11rem;
          background: url(../../assets/image/homepage/down.png) no-repeat;
          background-size: 0.2rem 0.11rem;
        }
      }
      .search{
        width: 62%;
        display: flex;
        align-items:center;
        height: 0.62rem;
        border-radius: 0.3rem;
        background: rgba(255,255,255,0.7);
        padding: 0 0.3rem;
        span{
          color: #999;
          font-size: 0.26rem;
          padding-left: 0.1rem;
        }
        img{
          width: 0.3rem;
          height: 0.3rem;
        }
      }
      .message{
       width: 12%;
       display: flex;
       align-items:center;
       justify-content:flex-end;
       text-align: left;
       em{
          width: 0.5rem;
          height: 0.5rem;
          background: url(../../assets/image/homepage/message.png) no-repeat;
          background-size: 0.5rem 0.5rem;
       }
      }
    }
    .headNavActive{
      background:rgba(255,255,255,1)!important;
      box-shadow: 0px 1px rgba(0, 0, 0, 0.1);
      .selectCity{
        span{
          color: #000;
        }
        em{
          background: url(../../assets/image/homepage/downActive.png) no-repeat;
          background-size: 0.2rem 0.11rem;
        }
      }
      .search{
        background: #f3f4f5!important;
        span{
          color: #98989f;
        }
        .borderFu(#eee,0.6rem);
      }
      .message{
        em{
          width: 0.5rem;
          height: 0.5rem;
          background: url(../../assets/image/homepage/messageActive.png) no-repeat;
          background-size: 0.5rem 0.5rem;
        }
      }
    }
    .banner{
        img{
            width: 7.5rem;
        }
    }
    .goTop{
      width: 0.79rem;
      height: 0.79rem;
      position: fixed;
      bottom: 1.5rem;
      right: 0.4rem;
      z-index: 666;
      display: none;
      background: url(../../assets/image/homepage/goTop.png) no-repeat;
      background-size: 0.79rem 0.79rem;
    }
    // 今日油价
    .oil{
      background: #ffffff;
      padding: 0 0.3rem;
      border-bottom: 0.2rem solid #f5f5f5;
       .oilHeader{
        position: relative;
        height: 0.9rem;
        .titImg{
          position: absolute;
          left: 0;
          top: 0.3rem;
          width: 1.5rem;

        }
        span{
          font-size: 0.25rem;
          color: #666666;
          position: absolute;
          top: 0.31rem;
          right: 0;

        }
      }
      .oilBox{
        .oil1{
          height: 1.5rem;
          padding-left: 0.3rem;
          padding-top: 0.3rem;
          .borderBFu(#ddd);
          .item{
            float: left;
            width: 33%;
          }
          .span1{
            float: left;
            margin-right: 0.04rem;
            height: 0.32rem;
            width: 0.66rem;
            font-size: 0.22rem;
            color: #f22e2e;
            background: #FEEAEA;
            border-radius: 0.18rem;
            display: flex;
            display:-webkit-flex;
            justify-content:center;
            align-items:center;

          }
          .span2{
            float: left;

            font-size: 0.56rem;
            color: #555555;
          }
        }
        .oil2{
          position: relative;
          height: 2rem;
          text-align: left;
          padding-left: 1.05rem;
          padding-top: 0.45rem;
          .con{
             h3{
              font-size: 0.3rem;
              color: #333333;
              margin-bottom: 0.22rem;

            }
            .p1{
              font-size: 0.24rem;
              color: #888888;
              margin-bottom: 0.02rem;
            }
            .p2{
              font-size: 0.2rem;
              color: #999999;
            }
          }
          .oilImg1{
            width: 0.9rem;
            height: 0.9rem;
            position: absolute;
            left: 0;
            top: 0.55rem;
          }
          .oilImg2{
            width: 0.6rem;
            height: 0.6rem;
            position: absolute;
            right: 0;
            top: 0.7rem;
          }
        }
      }
    }
    .group{
      background: #ffffff;
      padding: 0 0.3rem;
      border-bottom: 0.2rem solid #f5f5f5;
      .groupHeader{
        position: relative;
        height: 0.9rem;
        .titImg{
          position: absolute;
          left: 0;
          top: 0.3rem;
          width: 1.5rem;
          height:.32rem;
        }
        span{
          font-size: 0.25rem;
          color: #666666;
          position: absolute;
          top: 0.31rem;
          right: 0;

        }
      }
      .groupBox{
        display:flex;
        .goodsOne{
          display:flex;
          img{
            width:3.4rem;
            height:4.1rem;
            border:none;
          }
        }
        .goodsTwo{
          display:flex;
          img{
            width:3.4rem;
            height:2.0rem;
            border:none;
          }
        }
        .goodsThree{
          display:flex;
          margin-top:.1rem;
          img{
            width:3.4rem;
            height:2.0rem;
            border:none;
          }
        }
      }
    }
    .maintain{
      background: #ffffff;
      padding: 0 0.3rem;
      border-bottom: 0.2rem solid #f5f5f5;
      .maintainTitle{
        position: relative;
        height: 0.9rem;
        img{
          position: absolute;
          left: 0;
          top: 0.3rem;
          width: 1.5rem;

        }
        span{
          font-size: 0.25rem;
          color: #666666;
          position: absolute;
          top: 0.31rem;
          right: 0;
        }
      }
      .maintainBox1{
        height: 1.7rem;
        .img1{
          width: 3.4rem;
          float: left;
        }
        .img2{
          width: 3.4rem;
          float: right;
        }
      }
      .maintainBox2{
        padding-top: 0.36rem;
        padding-bottom: 0.3rem;
        height: 1.7rem;
        padding-left: 0.45rem;
        div{
          float: left;

           img{
              width: 0.7rem;
              margin-bottom: 0.1rem;
          }
        }


        .mright{
          float: left;
          width: 0.12rem;
          //margin-top: 0.24rem;
          margin: 0.24rem 0.33rem 0
        }
        font-size: 0.2rem;
        color: #666666;
      }
    }
    .seckill2{
      margin-bottom: 0.17rem;
      background: #ffffff;
      .seckillHead{
        padding: 0 0.2rem 0 0.15rem;
        display: flex;
        height: 0.8rem;
        line-height: 0.8rem;
        justify-content:space-between;
        align-items:center;
        position:relative;
          .more{
            font-size:.25rem;
            color:#666;
            position:absolute;
            right:.2rem;
            top:50%;
            transform:translateY(-50%);
            display:flex;
            align-items:center;
            img{
              width:.15rem;
              height:.26rem;
              margin-left: .08rem;
            }
          }
          .seckillLeft{
            display: flex;
            line-height: 0.7rem;
            align-items:center;
            color: #ff3a4c;
            img{
              width: 1.5rem;
              height: .32rem;
              margin-right: 0.2rem;
              margin-left: 0.1rem;
            }
            span{
              height: 0.40rem;
              margin: 0 0.05rem;
              line-height: 0.40rem;
              border-radius: 0.06rem;
              background: #ff3a4c;
              color: #fff;
              font-size: 0.28rem;
              padding: 0 0.05rem;
            }
            label{
              font-size: 0.3rem;
              font-weight: bolder;
            }
          }
      }
       .seckillMain{
          display: flex;
          overflow: scroll;
          .seckillItem{
            font-size: 0.25rem;
            width: 25%;
            min-width: 25%;
            img{
              width: 1.63rem;
              height: 1.44rem;
              margin: 0.15rem auto 0.4rem;
              display: block;
            }
            p{
              color:#F20E01;
              font-size: 0.26rem;
              //line-height: 0.4rem;
              //font-weight: 600;
              overflow: hidden;
              .r2{
                float: left;
                margin-left: 0.08rem;
                line-height: 0.32rem;
                font-size: 0.32rem
              }
              .r1{
                vertical-align: middle;
                font-size: 0.18rem;
                //transform:scale(0.5);
                color: #F22E2E;
                background: #FEEAEA;
                //padding: 0.06rem 0.13rem;
                border-radius: 0.15rem;
                width: 0.8rem;
                height: 0.32rem!important;
                line-height: normal!important;
                float: left;
                display: flex;
                justify-content:center;
                align-items:center;
                font-weight: normal;


              }
            }
            .s{
              color: #A4A4A4;
              font-size: 0.20rem;
              text-decoration:line-through;
              display: block;
              margin: 0.18rem 0 0.25rem 0;
            }
          }
          .seckillItemLast{
            position: relative;
            .morec{
              position: absolute;
              top: 0.7rem;
              left: 0;
              font-size: 0.25rem;
              color: #333333;
              width: 100%;
              font-weight: normal;

            }
            .moree{
              position: absolute;
              top: 1.30rem;
              left: 0;
              overflow: visible;
              width: 100%;

              .btn{
                background: #F22E2E!important;
                font-size: 0.26rem;
                color: #ffffff!important;
                margin-left: 0.3rem;
                border-radius: 0.24rem;
                font-weight: normal!important;
                width: 1.2rem;
                height: 0.5rem;
                display: flex;
                display:-webkit-flex;
                justify-content:center;
                align-items:center;
                text-align: center;
              }
            }
          }
        }
    }
    .seckill{
      background: url(../../assets/image/homepage/seckillBg.png) no-repeat;
      background-size: 7.5rem 3.31rem;
      margin-bottom: 0.17rem;
      height: 3.31rem;
      .seckillHead{
        padding: 0 0.2rem 0 0.15rem;
        display: flex;
        height: 0.7rem;
        line-height: 0.7rem;
        justify-content:space-between;
        align-items:center;
        .seckillLeft{
          display: flex;
          line-height: 0.7rem;
          align-items:center;
          img{
            width: 1.77rem;
            height: 0.28rem;
            margin-right: 0.1rem;
          }
          span{
            width: 0.43rem;
            height: 0.45rem;
            margin: 0 0.05rem;
            line-height: 0.45rem;
            color: #fff;
            font-size: 0.28rem;
            background: url(../../assets/image/homepage/titleLogo.png) no-repeat;
            background-size: 0.43rem 0.45rem;
          }
          label{
            font-size: 0.3rem;
            font-weight: bolder;
          }
        }
        .seckillRight{
          display: flex;
          line-height: 0.7rem;
          align-items:center;
          font-size: 0.23rem;
          color:#FD0D0D;
          span{
            padding-right: 0.1rem;
          }
          img{
            width: 0.13rem;
            display: block;
            height: 0.23rem;
            margin-top: -0.04rem;
          }
        }
      }
      .seckillMain{
        display: flex;
        overflow: scroll;
        .seckillItem{
          width: 25%;
          min-width: 25%;
          img{
            width: 1.63rem;
            height: 1.44rem;
            margin: 0 auto 0.1rem;
            display: block;
          }
          p{
            color:#F20E01;
            font-size: 0.27rem;
            line-height: 0.4rem;
            font-weight: 600;
          }
          s{
            color: #A4A4A4;
            font-size: 0.26rem;
            line-height: 0.4rem;
            display: block;
          }
        }
      }
    }
    .funIcon{
      display: flex;
      flex-wrap:wrap;
      background: #fff;
      padding: 0.2rem 0 0.1rem 0;
      .funItem{
        width: 20%;
        height: 1.42rem;
        img{
          display: block;
          margin: 0 auto;
          width: 0.8rem;
          height: 0.8rem;
        }
        p{
          text-align: center;
          font-size: 0.25rem;
          padding: 0.15rem 0;
          color: #666;
        }
      }
    }
    .tongInfor{
      display: flex;
      width: 100%;
      align-items:center;
      padding: 0.2rem;
      background: #fff;
      margin-bottom: 0.15rem;
      img{
        width: 0.7rem;
        height: 0.7rem;
        margin-top: -0.02rem;
      }
      p{
        font-size: 0.26rem;
        color:#333;
        height: 23px;
        line-height: 23px;
        text-align: left;
        padding-left: 0.2rem;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow:hidden;
      }
      li{
        width: 5.8rem;
        overflow: hidden;
      }
      span{
        color:#333;
        margin: -0.02rem 0.06rem 0;
        margin-right: 0.12rem;
        font-size: 0.26rem
      }
    }
    .appActive{
      display: flex;
      margin-bottom: 0.17rem;
      .appActiveItem{
        width: 25%;
        img{
          width: 100%;
          display: block;
          height: 1.38rem;
        }
      }
    }
    .active{
      .activeMain{
        height: 4.56rem;
        margin-bottom: 0.16rem;
        iframe{
          width: 7.5rem;
          height: 4.56rem;
        }
      }
      .shopGroupK{
        padding: 0.2rem;
        background: #fff;
        margin-bottom: 0.2rem;
        margin-top: -0.05rem;
        .groupEntro{
          width: 7.1rem;
          height: 2rem;
          img{
            width: 7.1rem;
            height: 2rem;
            display: block;
          }
        }
      }
      .activeLogos{
        img{
          width: 7.5rem;
          height: 2.06rem;
          display: block;
        }
      }
    }
    .footerActive{

      h1{
        height: 0.8rem;
        line-height: 0.8rem;
        display: flex;
        align-items:center;
        padding-left: 0.2rem;
        background: #fff;
        img{
          display: block;
          height:.31rem;
        }
      }
      a{
        display: block;
        width: 7.5rem;
        background: #fff;
        height: 3.9rem;
        background: #fff;
        padding-bottom: 0.1rem;
        margin-bottom: 0.17rem;
        img{
          width: 7.5rem;
          height: 3.2rem;
          display: block;
        }
        font-size:0.26rem;
        color: #333;
        p{
          height:0.7rem;
          text-align: left;
          line-height: 0.7rem;
          padding-left: 0.2rem;
        }
      }
    }
    .otherFun{
      background: #fff;
      margin-top: -0.07rem;
      margin-bottom: 0.17rem;
      padding-bottom: 0.2rem;
      h1{
        height: 0.8rem;
        line-height: 0.8rem;
        display: flex;
        align-items:center;
        padding-left: 0.2rem;
        img{
          display: block;
          height: .31rem;
        }
      }
      .cafeActive{
        .cafeItem{
          img{
            width: 7.1rem;
            height: auto;
            display: block;
            margin: 0 auto;
          }
        }
        .activeCafe{
            display: flex;
            width: 7.1rem;
            margin: 0.15rem auto 0;
            justify-content:space-between;
            img{
             width: 3.5rem;
             height: auto;
             display: block;
            }

        }
      }
    }
    .carPro{
      background: #fff;
      margin-bottom: 0.17rem;
      h1{
        height: 0.8rem;
        line-height: 0.8rem;
        display: flex;
        align-items:center;
        justify-content:space-between;
        padding:0 .2rem;
        >img{
          display: block;
          height:.31rem;
        }
        span{
          font-size:.26rem;
          color:#666;
          img{
            width:;
            height:.24rem;
          }
        }
      }
      .allProduct{
        display: flex;
        justify-between:space-around;
        flex-wrap:wrap;
        .listItem{
           padding: 0rem 0 0.6rem 0;
           margin: 0 0.1rem 0.1rem 0.175rem;
           box-sizing: border-box;
           img{
            width: 3.5rem;
            height: 3rem;
            background: #f7f7f7;
            display: block;
           }
           h2{
            width: 3.5rem;
            margin-top: 0.2rem;
            font-size: 0.26rem;
            line-height: 0.35rem;
            padding: 0 0.15rem;
            color: #222;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
           }
           p{
            font-size: 0.22rem;
            z-index: 2;
            height: 0.5rem;
            line-height: 0.5rem;
            position:relative;
            width: 3.46rem;
            margin: 0 auto;
            background: #f7f7f7;
            color: #EC2121;
           }
           .price{
            width: 3.5rem;
            position: absolute;
            bottom: 0.1rem;
            display: flex;
            justify-content:space-between;
            align-items:flex-end;
            padding: 0.15rem 0.2rem 0.05rem 0.2rem;
             img{
              width: 0.4rem;
              height:0.35rem;
              background: #fff;
             }
             span{
              font-size: 0.28rem;
              color:#e84632;
              padding-right: 0.15rem;
              font-weight: bolder;
             }
           }
        }
        .listItem:nth-child(2n){
          padding: 0rem 0rem 0.1rem 0;
          margin: 0 0.175rem 0.1rem 0;
        }
      }
    }
    /*边框一像素*/
    .productBorder{
      position:relative;
    }
    .productBorder::after {
      content: "";
      box-sizing: border-box;
      position: absolute;
      left: 0;
      top: 0;
      width: 200%;
      height: 200%;
      transform:scale(0.5,0.5);
      transform-origin:0 0;
      border: 1px solid #e1e2df;
    }
}
</style>
